<template>
  <div class="table_form_wrap">
    <el-row>
      <el-form
        :ref="formName"
        :model="formData"
        :inline="isInline"
        :disabled="allDisabled"
      >
        <el-row v-for="(rowNum, rowIndex) in totalRowNum" :key="rowIndex">
          <el-col
            v-for="(item, index) in formItemList.slice(rowIndex * colNumOfRow, rowNum * colNumOfRow)"
            :key="item.prop + index"
            :span="24 / colNumOfRow"
          >
            <el-form-item
              :prop="item.prop"
              :label="item.label"
              :label-width="item.width || formItemWidth"
            >
              <!-- 普通输入框 -->
              <template v-if="item.type === 'input'">
                <el-input
                  v-model.trim="formData[item.prop]"
                  :placeholder="item.placeholder || '请输入内容'"
                  :disabled="item.disabled"
                />
              </template>
              <!-- 普通下拉框 -->
              <template v-else-if="item.type === 'select'">
                <el-select
                  v-model="formData[item.prop]"
                  style="width: 100%"
                  :multiple="item.multiple"
                  :filterable="item.filterable"
                  :placeholder="item.placeholder || '请选择'"
                  :disabled="item.disabled"
                  collapse-tags
                >
                  <el-option
                    v-for="item in item.options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </template>
              <!-- 日期时间选择器 -->
              <template v-else-if="item.type === 'datePicker'">
                <!--
                  @datePickerType
                  默认不传为 daterange 日期选择器
                  datetimerange 为时间日期选择器
                -->
                <el-date-picker
                  v-model="formData[item.prop]"
                  :type="item.datePickerType || 'daterange'"
                  style="width: 100%"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :range-separator="item.rangeSeparator || '-'"
                  :start-placeholder="item.startPlaceholder || '开始日期'"
                  :end-placeholder="item.endPlaceholder || '结束日期'"
                  :disabled="item.disabled"
                />
              </template>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-row>
    <el-row type="flex" :justify="actionPosition">
      <slot v-if="showBasicAction" name="action">
        <el-button
          type="primary"
          @click="handleQueryForm"
        >查询</el-button
        >
        <el-button
          @click="handleResetForm"
        >清空</el-button
        >
      </slot>
      <slot name="extensionActions" />
    </el-row>
  </div>
</template>
<script>
export default {
  props: {
    formItemList: {
      type: Array,
      required: true
    },
    formItemWidth: {
      type: String,
      default: '100px'
    },
    isInline: {
      type: Boolean,
      default: false
    },
    colNumOfRow: {
      type: Number,
      default: 3
    },
    queryAction: {
      type: Function
    },
    formName: {
      type: String,
      default: 'formData'
    },
    actionPosition: {
      type: String,
      default: 'end'
    },
    allDisabled: {
      type: Boolean,
      default: false
    },
    showBasicAction: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      formData: {}
    }
  },
  mounted () {
    this.initFormDataFunc();
  },
  computed: {
    /* 总行数 */
    totalRowNum () {
      return Math.ceil(this.formItemList.length / this.colNumOfRow)
    }
  },
  methods: {
    /* 初始化表单数据 */
    initFormDataFunc () {
      this.formData = this.formItemList.reduce((value, item) => {
        if (this.formData[item.prop] instanceof Array) {
          value[item.prop] = item.initValue || [];
          return value;
        }
        value[item.prop] = '';
        return value;
      }, {});
    },
    /* 获取表单数据 */
    getFormDataFunc () {
      return this.formData;
    },
    /* 查询表单数据 */
    handleQueryForm () {
      this.$emit('getFormData', this.formData);
    },
    /* 清空表单数据 */
    handleResetForm () {
      this.$refs[this.formName].resetFields();
      this.initFormDataFunc();
      if (this.queryAction) {
        this.queryAction();
      }
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .el-range-input {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/deep/ .el-range-separator {
  display: flex;
  justify-content: center;
}
</style>
